<template>

    <el-dialog title="编辑角色" :visible="roleEditShow" @close="dialogClose" width="40%">

        <el-form :model="ruleForm" status-icon :rules="rules" ref="roleEdit" label-width="auto" class="demo-ruleForm">
            <el-form-item label="角色名称：" prop="name">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="角色顺序：" prop="index">
                <el-input type="number" v-model="ruleForm.index"></el-input>
            </el-form-item>
            <el-form-item label="角色类型：" prop="type">
                <el-select v-model="ruleForm.type" style="width:100%" clearable>
                    <el-option label="管理员1" value="1"></el-option>
                    <el-option label="管理员2" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="state">
                <el-radio-group v-model="ruleForm.state">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="停用"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" :rows="4" v-model="ruleForm.remarks">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>
<script>
export default {
    name: 'roleEdit',
    data () {
        return {
            ruleForm: {
                name:'',
                index:'',
                type:'',
                state:'',
                remarks:''
            },
            rules: {
                
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ],
                index: [
                    { required: true, message: '请输入角色顺序', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择角色类型', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择角色状态', trigger: 'change' }
                ]
                
            }
        };

    },

    props: {
        roleEditShow: {
            type: Boolean
        },
        record:{
            typeof:Object
        }

    },
    methods: {

        submitForm () {
            this.$refs.roleEdit.validate((valid) => {
                if (valid) {
                    alert('submit!');
                    this.$emit('dialogClose')
                }
                else {
                    return
                }
            });
        },

        // 重置
        // resetForm (formName) {
        //     this.$refs[formName].resetFields();
        // },
        dialogClose () {
            this.$emit('dialogClose')
            // this.liveAddShow=false
        }
    },
    mounted () {
        // console.log(this.record)
        this.ruleForm = this.record
    }
}
</script>
<!-- <style lang="less" scoped>

</style> -->